<template>
	<view class="coupon-list_page">
		<view class="coupon-list_header">
			<view class="header_item" v-for="(item, index) in navList" :key="index"
				:class="{ 'header-item_active': item.id == param.status }" @click="chooseStatus(item.id)">
				<text>
					{{ item.name }}
				</text>
			</view>
		</view>
		<view class="list" v-if="discountData.length>0">
			<view class="item" :class="{'disable': current === 2}" v-for="item in discountData" :key="item.couponId">
        <view class="money">
          <view class="num">￥{{item.couponVal}}</view>
<!--          <view class="rule">满100可用</view>-->
        </view>
        <view class="info">
          <view class="name">{{item.couponName}}</view>
          <view class="time">{{formateDate(item.startTime)}} ~ {{formateDate(item.endTime)}}</view>
        </view>
        <view class="btn" @click="onUse(item)" v-if="item.couponType === 2 && current === 1">去使用</view>
			</view>
		</view>
		<view class="hint" v-else>暂无数据!</view>
    <uni-popup ref="codePopup" type="center" background-color="#FFFFFF"  borderRadius="24rpx 24rpx 24rpx 24rpx" @close="codeInfo=''">
      <view class="qrCodePopup">
        <uqrcode class="code-box" ref="uqrcode" canvas-id="qrcode" :value="codeInfo.couponCode" :options="{ margin: 10 }"></uqrcode>
        <view class="title">{{codeInfo.couponName}}</view>
        <view class="subTitle" v-if="codeInfo.allowStationName">
          可用站点：
          <view class="detail">
            <p v-for="item in codeInfo.allowStationName.split(',')">{{item}}</p>
          </view>
        </view>
        <view class="subTitle" v-if="codeInfo.allowGradeName">
          可用等级：
          <view class="detail">
            <p v-for="item in codeInfo.allowGradeName.split(',')">{{item}}</p>
          </view>
        </view>
      </view>
    </uni-popup>
		<!-- <view class="Popup">
			<view class="Popup_">
				<canvas id="qrcode" canvas-id="qrcode"></canvas>
				<view class="title" style="text-align: center; font-size: 36rpx; margin-top: 30rpx;">点点滴滴
				</view>
				<view class="memo">使用规则:大大大大大大</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		listCoupon
	} from '@/api/index.js'
	export default {
		data() {
			return {
				couponTypeMap: {
					1: {
						name: '代金券',
						unit: '元'
					},
					2: {
						name: '折扣券',
						unit: '折'
					},
					3: {
						name: '兑换券',
						unit: '积分'
					},
					4: {
						name: '洗车券',
						unit: '车'
					}
				},
				statusTypeMap: {
					'1': {
						name: '未使用'
					},
					'2': {
						name: '已使用'
					}
					// '-1': {
					// 	name: '已过期'
					// },
				},
				navList: [{
						id: 1,
						name: '未使用'
					},
					{
						id: 2,
						name: '已使用'
					}
					// {
					// 	id: -1,
					// 	name: '已过期'
					// }
				],
				discountData: [],
				detailsData: {},
				current: 1,
				param: {
					// groupId: '',
					memberId: '',
					status: '1',
					pageSize: 20,
					pageNum: 1
				},
				totalPage: 0,
				totalCnt: 0,
				size: 188,
				qrCode: '',
				couponName: '',
				memo: '',
				active: null,
        codeInfo: '',
			};
		},
		onLoad(option) {
			console.log(option);
			this.param.memberId = option.memberId
			this.getListCoupon()
		},
		onPullDownRefresh() {
			// this.info = []
			this.discountData = []
			//this.stationDataList = []
			this.getListCoupon()
		},
		methods: {
			getListCoupon() {
				listCoupon(this.param).then(res => {
					uni.stopPullDownRefresh()
					console.log(res);
					if(res.code===200 && res.rows.length>0){
						this.discountData=res.rows
					}
				})
			},
      formateDate(date){
        if (date.includes('T')){
          const d = date.split('T')
          return d[0]
        }
      },
			async chooseStatus(e) {
				this.discountData = [];
				this.param.pageNum = 1;
				this.current = e;
				// uni.showLoading({
				// 	title: '加载中'
				// });
				this.param.status = e;
				if (e == 1) {
					this.getListCoupon();
					this.discountData.map(item => {
						item.checked = false;
					});
				} else if (e == 2) {
					this.getListCoupon();
				} 
			},
      onUse(card){
        this.codeInfo = card
        this.$refs.codePopup.open()
        this.$refs.uqrcode.remake({
          success: () => {
            console.log('生成成功');
          },
          fail: err => {
            console.log(err)
          }
        });
      }
		}
	};
</script>

<style lang="scss">
	.coupon-list_page {
		position: relative;

    .qrCodePopup{
      //width: 600upx;
      padding: 24upx;
      text-align: center;
      .code-box{
        width: 400upx;
        height: 400upx;
        margin: auto;
      }
      .title{
        font-size: 32upx;
        font-weight: 500;
        color: #1B1B1B;
      }
      .subTitle{
        font-size: 24upx;
        color: #9D9D9D;
        margin-top: 8upx;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .detail{
          text-align: left;
          color: #1B1B1B;
        }
      }
    }

		.coupon-list_header {
			padding: 26rpx 24rpx;
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			padding: 30rpx 0;
			background: #ffffff;
			border-radius: 8rpx;
			text-align: center;

			.header_item {
				-webkit-box-flex: 1;
				-ms-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #666666;
			}

			.header_item:nth-child(2) {
				border-left: 1rpx solid #cccccc;
				border-right: 1rpx solid #cccccc;
			}

			.header-item_active {
				font-size: 32rpx;
				
				color: #000000;
				text{
					font-weight: 600;
				}
			}
		}

		.trumpet {
			padding: 12rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.info {
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					margin-left: 2rpx;
				}
			}

			.right {
				image {
					width: 26rpx;
					height: 26rpx;
					color: #999999;
				}
			}
		}

		.list {
      padding: 20upx 34upx;
      background: #FFFFFF;
			.item {
        margin-bottom: 24upx;
        background: #FFF2F2;
        border-radius: 20upx;
				display: flex;
        justify-content: space-between;
        align-items: center;
				padding: 16rpx 24rpx;
        box-sizing: border-box;
        .btn{
          box-sizing: border-box;
          border-radius: 62upx;
          padding: 20upx 32upx;
          background: #F63218;
          color: #FFFFFF;
          text-align: center;
          font-size: 24upx;
        }
        .money{
          min-width: 160upx;
          color: #F63218;
          text-align: center;
          border-right: 1px dashed #FDD6D1;
          padding: 20upx 24upx 20upx 0;
          box-sizing: border-box;
          .num{
            font-size: 56upx;
            font-weight: 500;
          }
          .rule{
            //margin-top: 8upx;
            font-size: 24upx;
          }
				}
        .info{
          flex: 1;
          margin-left: 24upx;
          .name{
            line-height: 56upx;
            font-size: 32upx;
            color: #1B1B1B;
            font-weight: 500;
          }
          .time{
            margin-top: 8upx;
            color: #9D9D9D;
            font-size: 24upx;
            font-weight: normal;
          }
        }

				.left-past {
					background: radial-gradient(circle at right top, transparent 16rpx, #FFFFFF 0, #FFFFFF 100%) right top / 100% 50% no-repeat,
						radial-gradient(circle at right bottom, transparent 16rpx, #FFFFFF 0, #FFFFFF 100%) right bottom / 100% 50% no-repeat;
					filter: drop-shadow(-6rpx 0 6rpx rgba(0, 0, 0, 0.3));
				}

				.right {
					padding: 32rpx 22rpx 32rpx 24rpx;
					flex: 1;
					// position: relative;
					background: radial-gradient(circle at left top, transparent 16rpx, #51afff 0, #2877ff 100%) right top / 100% 50% no-repeat,
						radial-gradient(circle at left bottom, transparent 16rpx, #51afff 0, #2877ff 100%) right bottom / 100% 50% no-repeat;
					filter: drop-shadow(3px 0 3px rgba(0, 0, 0, 0.3));
					border-top-right-radius: 16rpx;
					border-bottom-right-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.price {
						text {
							font-size: 32rpx;
							font-weight: 500;
							color: #E56646;
							line-height: 44rpx;
						}

						text:nth-child(2) {
							font-size: 50rpx;
						}
					}

					.astrict {
						font-size: 24rpx;
						color: #E56646;
						line-height: 34rpx;
					}

					.btn {
						width: 120rpx;
						height: 44rpx;
						background: #ffffff;
						border-radius: 32rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #2877ff;
						line-height: 44rpx;
						text-align: center;
					}
				}

				.discount {
					background: radial-gradient(circle at left top, transparent 16rpx, #0ba360 0, #3cba92 100%) right top / 100% 50% no-repeat,
						radial-gradient(circle at left bottom, transparent 16rpx, #0ba360 0, #3cba92 100%) right bottom / 100% 50% no-repeat;
				}

				.coin {
					background: radial-gradient(circle at left top, transparent 16rpx, #f6d365 0, #fda085 100%) right top / 100% 50% no-repeat,
						radial-gradient(circle at left bottom, transparent 16rpx, #f6d365 0, #fda085 100%) right bottom / 100% 50% no-repeat;
				}

				.right-past {
					background: radial-gradient(circle at left top, transparent 16rpx, #FBF3EC 0, #FBF3EC 100%) right top / 100% 50% no-repeat,
						radial-gradient(circle at left bottom, transparent 16rpx, #FBF3EC 0, #FBF3EC 100%) right bottom / 100% 50% no-repeat;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.menu {
					transition: .4s;
					transition-timing-function: linear;
					background: #ffffff;
					box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.02);
					border-radius: 16rpx;
					margin-top: -40rpx;
					width: 710rpx;
					box-sizing: border-box;
					padding: 80rpx 30rpx 32rpx 32rpx;
					height: 528rpx;
					overflow: hidden;

					.station {
						display: flex;
						align-items: center;

						.station-left {
							width: 20%;
						}

						.station-right {
							width: 70%;
							overflow: hidden;

							word-wrap: break-word;
							word-break: break-all;
						}

						.station-left,
						.station-right {
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
							line-height: 24rpx;
							margin: 16rpx 16rpx;
						}
					}
				}

				.none {
					width: 710rpx;
					height: 0rpx;
					overflow: hidden;
					box-sizing: border-box;
					padding: 9rpx 15px 0rpx 16px;
					border-radius: 8px;
					transition: .4s;
					transition-timing-function: linear;

					.station {
						display: flex;
						align-items: center;

						.station-left {
							width: 20%;
						}

						.station-right {
							width: 70%;
							overflow: hidden;

							word-wrap: break-word;
							word-break: break-all;
						}

						.station-left,
						.station-right {
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
							line-height: 24rpx;
							margin: 16rpx 16rpx;
						}
					}
				}
        &.disable{
          background:#F9F9F9 ;
          .money,.num,.name,.title{
            color: #9D9D9D;
          }
        }
			}
		}

		.hint {
			width: 100%;
			height: 70vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 42rpx;
			color: #c0c0c0;
			letter-spacing: 10rpx;
		}

		.Popup {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;

			.Popup_ {
				border-radius: 14rpx;

				.memo {
					width: 376rpx;
					position: absolute;
				}
			}
		}

		.close {
			display: none;
		}
	}
</style>